<template>
<div class="container">
  <div class="header horizontal">
    <router-link to='/'>
      <svg width="100" height="120">
        <circle cx="50" cy="70" r="36" fill="green" />
      </svg>
    </router-link>
  </div>
  <div class="panel center">
    <div class="panel-title">
      <h3>注册</h3>
    </div>
    <div class="panel-body">
      <input type="text" v-model="email" placeholder="Email" class="col-12">
      <div class="col-12 icode">
        <input type="text" v-model="emailCode" class="col-5" @blur="ident" placeholder="验证码">
        <div class="col-4">
          <a :disabled="isDisabled" @click="getCode" class="btn blue">{{ status }}</a>&nbsp;&nbsp;
        </div>
        <!-- <div class="col-3">
          <a href="javascript:" class="btn">进入邮箱</a>
        </div> -->
      </div>
      <input type="password" v-model="password" placeholder="6~16位字符密码" class="col-12">
  	  <button type="button" :disabled="isReg" @click="reg" class="btn blue">注册</button>
      <p class="font-s horizontal">注册 即表示您同意并愿意遵守 DelBug<router-link to="/provisions" class="f-blue"> 《用户条款》</router-link></p>
      <router-link to="/login">
        <button type="button" class="btn primary">已有账号登陆</button>
      </router-link>
    </div>
  </div>
</div>
</template>

<script>
// import axios from 'axios';
import app from '@/utils';

export default {
  name: 'register',
  data() {
  	return {
      email: '',
  	  password: '',
  	  isShow: true,
      emailCode: '',
      status: '获取验证码',
      isDisabled: false,
      adopt: false,
  	  isReg: false
  	}
  },
  methods: {
  	reg: function() {
      if(!this.adopt)
        return app.flash('warning', '请输入正确的验证码~');
      if(!app.validity('pass',this.password))
        return app.flash('warning', '请输入正确的密码~');
	  app.request({
		  url: '/api/user/register',
		  method: 'POST',
		  data: {
			"email": this.email,
			"password": this.password
		  },
		  success: response => {
			let data = response.data;
			if(data.s) {
			  app.flash('success', '注册成功，请登陆')
			  this.$router.push({path: '/login'});
			}else {
			  this.isShow = true;
			  app.flash('error', '注册失败~');
			}
		  }
	  })
  	},
    getCode: function() {
      if(!this.email) 
        return app.flash('warning', '请输入Email~');
		app.request({
			url: '/api/sendEmailCode',
			method: 'POST',
			data: {
				"email": this.email
			},
			success: response => {
				let data = response.data;
				if(!data.s) 
				  return app.flash('warning', '请输入正确的Email~');
				let _this = this,
				    val = 60,
				    timer = null;
				function time() {
				  if(val == 0) {
				    clearInterval(timer);
				    _this.isDisabled = false;
				    _this.status = '获取验证码';
				  }else {
				    _this.isDisabled = true;
				    _this.status = val + ' s';
				    val--;
				  }
				}
				timer = setInterval(function(){
				  time();
				}, 1000);
			}
		})
    },
    ident() {
      let emailCode = this.emailCode;
      if(!emailCode) {
        // this.status = '验证码错误';
        this.adopt = false;
      }else {
		  app.request({
			  url: '/api/identifyEmailCode',
			  method: 'POST',
			  data: {
				  'emailCode': emailCode
			  },
			  success: response => {
				  let data = response.data;
				  if(data.s) {
				    // this.status = '验证通过！';
				    this.adopt = true;
				    // this.getCode = null;
				  }else {
				    this.adopt = false;
				  }
			  }
		  })
      }
    }
  }
}
</script>

<style scoped>
	.container {margin-top: 130px;}
	.header {
		border: 0;
		background: inherit;
	}
	.panel-body .icode .btn {
		float: left;
		margin-left: 10px;
	}
	.logo {

	}
</style>